﻿<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .nav {
            overflow: hidden;
            text-align: center;
            background-color: #f4f4f4;
        }
        
        .nav li {
            float: left;
            padding: 5px;
            width: 50px;
            color: #666;
            list-style: none;
            border-left: 1px solid #f4f4f4;
            cursor: pointer;
        }
        
        .nav li:hover,
        .selected {
            background-color: #ecebeb;
            border-left: 1px solid #ecebeb;
        }
        
        .content {
            border: 1px solid #f4f4f4;
            height: 80px;
            padding: 10px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li class="selected">姓名</li>
        <li>年龄</li>
        <li>性别</li>
        <li>班级</li>
    </ul>

    <div class="content">
        <div class="list ">
            <p>姓名：</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>
            <p>&nbsp;&nbsp;&nbsp;黎明</p>

        </div>

        <div class="list">
            <p>年龄：</p>
            <p>&nbsp;&nbsp;&nbsp;22</p>
        </div>

        <div class="list">
            <p>性别：</p>
            <p>&nbsp;&nbsp;&nbsp;男</p>
        </div>

        <div class="list">
            <p>班级：</p>
            <p>&nbsp;&nbsp;&nbsp;商务班级</p>
        </div>
    </div>
    <div class="button-div">
        <!-- <input type="submit" value=" 确定 " class="button"/>
				                <input type="reset" value=" 重置 " class="button" /> -->
    </div>


    <script>
        $(function() {
            //获取点击事件的对象
            $(".nav li").click(function() {
                //获取要显示或隐藏的对象
                var divShow = $(".content").children('.list');
                //判断当前对象是否被选中，如果没选中的话进入if循环
                if (!$(this).hasClass('selected')) {
                    //获取当前对象的索引
                    var index = $(this).index();
                    //当前对象添加选中样式并且其同胞移除选中样式；
                    $(this).addClass('selected').siblings('li').removeClass('selected');
                    //索引对应的div块显示
                    $(divShow[index]).show();
                    //索引对应的div块的同胞隐藏
                    $(divShow[index]).siblings('.list').hide();
                }
            });
        });
    </script>
</body>

</html>